<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>幸运大转盘</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="//s10.realdtech.com/xws/lootery/css/style.css"/>
	</head>
	<body>
		<div class="banner">
			<img src="//s10.realdtech.com/xws/lootery/img/banner.jpg">
		</div>
		<div class="lottery-times">
			<p>今天剩余抽奖次数:&nbsp;<span><i class="num"></i>次</span></p>
		</div>
		<!--大转盘-->
		<div class="wheel-out">
			<img src="//s10.realdtech.com/xws/lootery/img/outer-bg.png" id="outBg">
			<img src="//s10.realdtech.com/xws/lootery/img/inner-wheel.png" id="innerWheel">
			<img src="//s10.realdtech.com/xws/lootery/img/btn.png" id="wheelBtn">
		</div>
		<!--活动规则-->
		<div class="rule">
			<img src="//s10.realdtech.com/xws/lootery/img/rule.png">
		</div>
		<div class="road">
			<img src="//s10.realdtech.com/xws/lootery/img/road.png">
		</div>
		
		<!--遮罩层-->
		<div class="mask">
			<div class="close-btn">
				<div class="close">
					<img src="//s10.realdtech.com/xws/lootery/img/close.png">
				</div>
			</div>
			<!--弹出的img-->
			<div class="alertk">
				<div class="alertImg alert">
					<img src="//s10.realdtech.com/xws/lootery/img/alert.png" >
				</div>
				<div class="alertImg alert">
					<img src="//s10.realdtech.com/xws/lootery/img/alert2.png">
				</div>
				<div class="alertImg alert">
					<img src="//s10.realdtech.com/xws/lootery/img/alert3.png">
				</div>
				<div class="alertImgWin alert">
					<img src="//s10.realdtech.com/xws/lootery/img/alert4.png">
				</div>
				<div class="alertImgWin alert">
					<img src="//s10.realdtech.com/xws/lootery/img/alert5.png">
				</div>
				<div class="alertImgWin alert">
					<img src="//s10.realdtech.com/xws/lootery/img/alert6.png">
				</div>
			</div>
		</div>
	</body>
	<script src="//s10.realdtech.com/xws/lootery/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="//s10.realdtech.com/xws/lootery/js/jquery.rotate.min.js"></script>
<script>
$(function() {
		var $btn = $('#wheelBtn');
		var $inner = $('#innerWheel');
		var playnum =2; //初始次数，由后台传入
		$('.num').html(playnum);
		var isture = 0;
		var clickfunc = function() {
			var data = [1, 2, 3, 4, 5, 6,7,8];
			//data为随机出来的结果，根据概率后的结果
			var rand = Math.random();
			//可控制每个奖品中奖机率
//			if(rand < 1){
//				rand = 0.9
//			}
			data = data[Math.floor(rand * data.length)];
			console.log(Math.random());
			console.log(data)
			if(data == 1){
//				谢谢参与~再来一次吧~
				rotateFuncNoPrize(1, 0);
			}else if(data == 2){
//				电影票1张
				rotateFuncMovie(2, 45);
			}else if(data == 3){
//				谢谢参与~再来一次吧~
				rotateFuncNoPrize(3, 90);
			}else if(data == 4){
//				情侣对戒
				rotateFuncRings(4, 135);
			}else if(data == 5){
//				谢谢参与~再来一次吧~
				rotateFuncNoPrize(5, 180);
			}else if(data == 6){
//				电影票一张
				rotateFuncMovie(8, 225);
			}else if(data == 7){
//				谢谢参与~再来一次吧~
				rotateFuncNoPrize(7, 270);
			}else if(data == 8){
				//温泉券
				rotateFuncSpring(6, 315);
			}
		}
		
		//时间戳
//		var dd = new Date(); console.log(dd)
//		dd.setDate(dd.getDate()+1);//获取明天
//		var y = dd.getFullYear();
//		var m = dd.getMonth()+1;//获取当前月份的日期
//		var d = dd.getDate();
//		date = new Date(y+'-'+m+'-'+d+' 00:00:00');
//		console.log(date);
//		date.setTime(date.getTime());//明天的00:00:00
//		str+=";expires="+date.toGMTString();
//		document.cookie = str;
		
		wheelBtn.onclick=function run() {
			if(isture) return; // 如果在执行就退出
			isture = true; // 标志为 在执行
			if(playnum <= 0) { //当抽奖次数为0的时候执行
				$(".mask").show();
				$(".alert").eq(2).show().siblings().hide();
				$('.num').html(0);
				isture = false;
			} else { //还有次数就执行
				playnum = playnum - 1; //执行转盘了则次数减1
				if(playnum <= 0) {
					playnum = 0;
				}
				$('.num').html(playnum);
				clickfunc();
			}
		//执行一次  过16000秒结束 才能点击
		  wheelBtn.onclick = null;
		  clearTimeout(timer);
		  var timer = setTimeout(function(){
		    wheelBtn.onclick = run;
		   },4000);  
		};
		//谢谢参与
		var rotateFuncNoPrize = function(awards, angle) {
			isture = true;
			$inner.stopRotate();
			$inner.rotate({
				angle: 0,
				duration: 4000, //旋转时间
				animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
				callback: function() {
					isture = false; // 标志为 执行完毕
					$(".mask").show();
					$(".alert").eq(1).show().siblings().hide();
				}
			});
		};
		//获取电影票
		var rotateFuncMovie = function(awards, angle) {
			isture = true;
			$inner.stopRotate();
			$inner.rotate({
				angle: 0,
				duration: 4000, //旋转时间
				animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
				callback: function() {
					isture = false; // 标志为 执行完毕
					$(".mask").show();
					$(".alert").eq(5).show().siblings().hide();
				}
			});
		};
		//温泉券
		var rotateFuncSpring = function(awards, angle) {
			isture = true;
			$inner.stopRotate();
			$inner.rotate({
				angle: 0,
				duration: 4000, //旋转时间
				animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
				callback: function() {
					isture = false; // 标志为 执行完毕
					$(".mask").show();
					$(".alert").eq(4).show().siblings().hide();
				}
			});
		};
		//情侣对戒
		var rotateFuncRings = function(awards, angle) {
			isture = true;
			$inner.stopRotate();
			$inner.rotate({
				angle: 0,
				duration: 4000, //旋转时间
				animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
				callback: function() {
					isture = false; // 标志为 执行完毕
					$(".mask").show();
					$(".alert").eq(3).show().siblings().hide();
				}
			});
		};
		
		//关闭弹窗按钮
		$(".close").on("click",function(){
			$(".mask").hide();
		});
	});
</script>
</html>
